<template>
  <div class="app-container">
    <el-row>
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="text item">
            <!--    头像        -->
            <div style="text-align: center">
              <el-avatar :size="avatarSize" :src="userInfo.userPicture"></el-avatar>
            </div>
            <el-descriptions class="margin-top" :column="1" size="medium "border>
              <el-descriptions-item>
                  <template slot="label" >
                    <svg-icon icon-class="user-name" />
                    用户昵称
                  </template>
                  {{userInfo.userName}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <svg-icon icon-class="birthday"/>
                  生日
                </template>
                {{userInfo.birthday}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <svg-icon icon-class="phone"/>
                  手机号
                </template>
                {{userInfo.mobilePhone}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <svg-icon icon-class="mailbox"/>
                  邮箱
                </template>
                {{userInfo.mailbox}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16" :offset="1">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <div class="text item">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本资料" name="first">

                <el-form :model="user" :rules="UserInfoRules" ref="user" label-width="100px">

                  <el-form-item label="用户昵称" prop="userName">
                    <el-input v-model="user.userName" placeholder="请输入用户昵称" clearable/>
                  </el-form-item>

                  <el-form-item label="生日" prop="birthday">
                    <el-date-picker v-model="user.birthday" type="date" placeholder="请选择生日" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
                  </el-form-item>

                  <el-form-item label="手机号" prop="mobilePhone">
                    <el-input v-model="user.mobilePhone" mobilePhone="请输入手机号" clearable/>
                  </el-form-item>

                  <el-form-item label="邮箱" prop="mailbox">
                    <el-input v-model="user.mailbox" mailbox="请输入邮箱" clearable/>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="save('user')">保存</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>

              <el-tab-pane label="修改密码" name="second">
                <el-form :model="upadePwd" :rules="upadePwdRules" ref="upadePwd" label-width="100px">

                  <el-form-item label="旧密码" prop="oldPwd">
                    <el-input v-model="upadePwd.oldPwd" show-password placeholder="请输入旧密码" clearable/>
                  </el-form-item>

                  <el-form-item label="新密码" prop="newPwd">
                    <el-input v-model="upadePwd.newPwd" show-password placeholder="请输入新密码" clearable/>
                  </el-form-item>

                  <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input v-model="upadePwd.confirmPwd" show-password placeholder="请确认密码" clearable/>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="updatePwd('upadePwd')">提交</el-button>
                  </el-form-item>

                </el-form>
              </el-tab-pane>
            </el-tabs>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import store from '@/store'
  import {getInfo, insertUserInfo,updatePwd} from '@/api/user'

  export default {
  name: 'UserInfo',
  data () {
    return {
      // 头像大小
      avatarSize: 120,
      userInfo:{
        userPicture:'',
      },
      activeName: 'first',
      user:{
        userName: "",
        userPicture: "",
        birthday: "",
        sex: "",
        mobilePhone: "",
        mailbox: ""
      },
      upadePwd:{
        oldPwd:'',
        newPwd: '',
        confirmPwd: '',
      },
      UserInfoRules:{
        userName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
        birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
        mobilePhone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        mailbox: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
      },
      upadePwdRules:{
        oldPwd:[{required: true, message: '请输入旧密码', trigger: 'blur'}],
        newPwd:[{required: true, message: '请输入新密码', trigger: 'blur'}],
        confirmPwd:[{required: true, message: '请确认密码', trigger: 'blur'}],
      }

    };
  },
  created() {
    this.getUserInfo();
  },
  methods:{
    // 获取用户信息
    getUserInfo(){
      var me = this
      getInfo().then(response => {
          if(response.status === 200){
          me.userInfo = response.data.userInfo;
          me.user = response.data.userInfo;
        }else {
          me.$message({message: response.msg, type: 'error'})
        }
      }).catch(error => {
      })
    },

    handleClick(){},
    // 保存
    save(user){
      var me = this
      me.$refs[user].validate((valid) => {
        if (valid) {
          insertUserInfo(me.user).then(response =>{
            if(response.status === 200){
              me.$message({message:response.msg,type:'success'})
              me.getUserInfo();
            }else {
              me.$message({message: response.msg, type: 'error'})
            }
          }).catch(error =>{
          })
        } else {
          return false;
        }
      });
    },
    // 修改密码
    updatePwd(pwd){
      var me = this
      me.$refs[pwd].validate((valid) => {
        if (valid) {
          updatePwd(me.upadePwd).then(response =>{
             if(response.status === 200){
              me.$message({message:response.msg,type:'success'})
              // 密码修改成功提示重新登录
              me.upadePwd = {}
              me.login();
            }else {
              me.$message({message: response.msg, type: 'error'})
            }
          }).catch(error =>{
          })
        } else {
          return false;
        }
      });
    },
    // 密码修改成功提示重新登录
    login() {
        this.$confirm('密码已修改请重新登录', '提示', {
          confirmButtonText: '重新登录',
          type: 'warning',
          showCancelButton:false,
          center: true,
          showClose:false,
          closeOnClickModal:false
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }

  }
}
</script>

<style scoped>

</style>
